<template>
    <TopNavBar title="AI量化" type="back" rightType="true" @rightClick="handleRightClick" />
  <div class="aiquant-page">
    
    <div class="aiquant-content">
      <div class="aiquant-section">
        <div class="aiquant-title">AI量化推荐</div>
        <div class="aiquant-desc">什么是AI GPT智能量化？</div>
        <button class="aiquant-btn" @click="goToIntro">立即去了解</button>
      </div>
      <div class="aiquant-tabs">
        <div :class="['tab', {active: tab === '0'}]" @click="tabClick('0')">活期</div>
        <div :class="['tab', {active: tab === '1'}]" @click="tabClick('1')">定期</div>
      </div>
      <div class="aiquant-products">
        <div class="product-card" v-for="item in listArray">
          <div class="product-header">
            <span class="product-title">{{ item.title }}</span>
            <span class="product-rate">效益 <span class="rate-green">{{ item.avgRate * (item.daynum ? item.daynum: 1) }} %</span></span>
          </div>
          <div class="product-periods">
            <span :class="['period', {active: item.daynum === 1}]" @click="item.daynum=1">1天</span>
            <span :class="['period', {active: item.daynum === 3}]" @click="item.daynum=3">3天</span>
            <span :class="['period', {active: item.daynum === 5}]" @click="item.daynum=5">5天</span>
          </div>
          <button class="product-btn" @click="goToSmartQuant(item)">申购 <span class="arrow">→</span></button>
        </div>
        <!-- <div class="product-card">
          <div class="product-header">
            <span class="product-title">ChatGPT03–Grid Trading</span>
            <span class="product-rate">效益 <span class="rate-green">2%</span></span>
          </div>
          <div class="product-periods">
            <span class="period active">1天</span>
            <span class="period">3天</span>
            <span class="period">5天</span>
          </div>
          <button class="product-btn" @click="goToSmartQuant">申购 <span class="arrow">→</span></button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const tab = ref('0')
import TopNavBar from '@/components/common/TopNavBar.vue'
import { getFinancial } from '@/api/financial/index'

const allList = ref([])
const listArray = ref([])
const isShow = ref(false)
const daynum = ref(1)
const tabClick = (tabnum) => {
  tab.value = tabnum
  // getInit()
  listArray.value = allList.value.filter(item => item.classify == tab.value)
  listArray.value.length === 0 ? (isShow.value = true) : (isShow.value = false)
}
const getInit = async () => {
  try {
    let data = {
      classify: ''
    }
    const res = await getFinancial(data)
    if (res.code === 200) {
      allList.value = res.rows
      allList.value.forEach(element => {
        element.daynum = 1
      });
      console.log(allList.value)
      listArray.value = allList.value.filter(item => item.classify == tab.value)
      // console.log(listArray)
      listArray.value.length === 0 ? (isShow.value = true) : (isShow.value = false)
    }
  } catch (error) {
    console.log(45)
  }
}
getInit()

onMounted(() => {
  // getInit()
})
const router = useRouter()
function handleRightClick() {
  router.push('/aiquantOrder')
}
function goToSmartQuant(item) {
  // router.push(`/smartquant?id=${item.id}`)
  router.push({
    path: '/smartquant',
    query: { id: item.id }
  })
}
function goToIntro() {
  router.push('/aiquant-intro')
}
</script>

<style scoped>
.aiquant-page {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 24px;
  padding-top: 20px;
}
.aiquant-header {
  background: #fff;
  padding: 16px 16px 0 16px;
  border-radius: 16px;
  margin: 0 12px 16px 12px;
}
.top-img {
  width: 100%;
  border-radius: 16px;
  display: block;
}
.aiquant-content {
  margin: 0 12px;
}
.aiquant-section {
  background: url('/static/img/F6J_74ca18f6_Qwu.897b7ab4.png') no-repeat center center #fff;
  background-size: 100% 100%;
  border-radius: 16px;
  padding: 30px 16px 26px 16px;
  margin-bottom: 18px;
  text-align: left;
  position: relative;
}
.aiquant-icon {
  width: 48px;
  height: 48px;
  position: absolute;
  right: 16px;
  top: 16px;
}
.aiquant-title {
  font-size: 24px;
  font-weight: bold;
  color: #ff2d2d;
  margin-bottom: 8px;
}
.aiquant-desc {
  font-size: 16px;
  color: #222;
  margin-bottom: 18px;
}
.aiquant-btn {
  background: #000;
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 10px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}
.aiquant-tabs {
  display: flex;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 18px;
  overflow: hidden;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  color: #222;
  cursor: pointer;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.tab.active {
  color: #000;
  border-bottom: 2px solid #000;
}
.aiquant-products {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.product-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px 16px 16px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.product-title {
  font-size: 16px;
  font-weight: 700;
  color: #222;
}
.product-rate {
  font-size: 15px;
  color: #222;
}
.rate-green {
  color: #1abc9c;
  font-weight: 700;
  margin-left: 2px;
}
.product-periods {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  justify-content: space-between;
  margin-top: 10px;
}
.period {
  background: #f2f2f2;
  border-radius: 8px;
  padding: 6px 18px;
  font-size: 15px;
  color: #222;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.period.active {
  background: #000;
  color: #fff;
}
.product-btn {
  width: 100%;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 0;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrow {
  margin-left: 8px;
  font-size: 20px;
}
</style> 